<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>蜂窝网</title>
		<link href="/css/index.css" type='text/css' rel='stylesheet' />

	</head>

	<body>
		<!--头部-->
		<div class='head'>
			
		</div>
		<!--轮播图-->
		<div class='rotation'>
			<!--大图-->
			<ul id='pic'>
				<li><img src="http://b4-q.mafengwo.net/s6/M00/B2/44/wKgB4lMeANWARazfAAJhc3Mqrzc65.jpeg?imageMogr2%2Fthumbnail%2F%21660x480r%2Fgravity%2FCenter%2Fcrop%2F%21660x480%2Fquality%2F90"></li>
			</ul>
			<!--小图-->
			<div class='pic_min'>
				<ul id='liss'>
					<li>
						<img src="http://b4-q.mafengwo.net/s6/M00/B2/44/wKgB4lMeANWARazfAAJhc3Mqrzc65.jpeg?imageMogr2%2Fthumbnail%2F%21660x480r%2Fgravity%2FCenter%2Fcrop%2F%21660x480%2Fquality%2F90" />
					</li>
					<li>
						<img src="http://b4-q.mafengwo.net/s8/M00/E9/7E/wKgBpVXb7fWAdELLAAIEJTdo0yQ07.jpeg?imageMogr2%2Fthumbnail%2F%21660x480r%2Fgravity%2FCenter%2Fcrop%2F%21660x480%2Fquality%2F90" />
					</li>
					<li>
						<img src="http://p2-q.mafengwo.net/s6/M00/95/97/wKgB4lMd21eAJihmAAHg7IAnueI03.jpeg?imageMogr2%2Fthumbnail%2F%21660x480r%2Fgravity%2FCenter%2Fcrop%2F%21660x480%2Fquality%2F90" />
					</li>
					<li>
						<img src="http://b3-q.mafengwo.net/s6/M00/16/3D/wKgB4lMN93iACwF-AAH3VN3RqkE25.jpeg?imageMogr2%2Fthumbnail%2F%21660x480r%2Fgravity%2FCenter%2Fcrop%2F%21660x480%2Fquality%2F90" />
					</li>
					<li>
						<img src="http://p1-q.mafengwo.net/s9/M00/FD/2D/wKgBs1dfznWATcsIAAD0gOyChMs88.jpeg?imageMogr2%2Fthumbnail%2F%21660x480r%2Fgravity%2FCenter%2Fcrop%2F%21660x480%2Fquality%2F90" />
					</li>
				</ul>
				<div class='back'></div>
				<div><a href="#">历历在目</a><i class='jian'></i></div>
			</div>
			<!--搜索框-->
			<div class='search'>
				<ul class='search_top'>
					<li><i class='search_pic search_pic1' date-place='搜索目的地'></i>全部</li>
					<li><i class='search_pic search_pic1' date-one='1'></i>酒店</li>
					<li><i class='search_pic search_pic1' date-place='你要去那'></i>全部</li>
					<li><i class='search_pic search_pic1' date-place='产品名称/目的地'></i>全部</li>
				</ul>
				<div class='search_bottom'>
					<div class='search_input'>
						<input name='keywords' type='text' placeholder="你要去那……">
					</div>
					<div class='search_input1'>
						<input name='keywords' type='text' placeholder="搜索目的地" class='input1'>
						<input name='keywords' type='text' placeholder="未定" class='input2'>
						<input name='keywords' type='text' placeholder="未定" class='input3'>
					</div>
					<a herf='#' class='search_a'>
						<i class='search_quan'></i>
					</a>

				</div>
			</div>
		</div>
		<!--内容区-->
		<div class='meisongqu'>
			<!--左边内容区-->
			<div class='meisongqu_left'>
				<!--专栏-->
				<div class='meisongqu_zhuanlan'>
					<h2><a>专栏之家</a></h2>
					<img src="img/left.png" />
					<h3><a>春节不春节</a></h3>
					<p>没人不站在记忆之中。</p>
				</div>
				<!--专栏攻略 1-->
				<div class='meisongqu_zhuanlan meisongqu_margin'>
					<h2><a>专栏之家</a></h2>
					<img src="img/left.png" />
					<h3><a>春节不春节</a></h3>
					<p>没人不站在记忆之中。</p>
				</div>
				<!--专栏攻略 2-->
				<div class='meisongqu_zhuanlan meisongqu_margin'>
					<h2><a>专栏之家</a></h2>
					<img src="img/left.png" />
					<h3><a>春节不春节</a></h3>
					<p>没人不站在记忆之中。</p>
				</div>
			</div>
			<!--右边内容区-->
			<div class='meisongqu_right'>
				<!--热卖产品-->
				<div class='meisongqu_right_top'>
					<h2><a>爆款热卖</a></h2>
					<ul class='meisongqu_ul'>
						<li>
							<img src="img/right.jpeg" />
							<h3>广州往返芽庄5天4晚自由行（南航正点航班+赠专车接送机+赠百蛋泥浆浴门票+特惠米娅酒店+入住珍珠含三餐)</h3>
							<p>￥<strong>299</strong>起</p>
						</li>
						<li>
							<img src="img/right.jpeg" />
							<h3>广州往返芽庄5天4晚自由行（南航正点航班+赠专车接送机+赠百蛋泥浆浴门票+特惠米娅酒店+入住珍珠含三餐)</h3>
							<p>￥<strong>299</strong>起</p>
						</li>
						<li>
							<img src="img/right.jpeg" />
							<h3>广州往返芽庄5天4晚自由行（南航正点航班+赠专车接送机+赠百蛋泥浆浴门票+特惠米娅酒店+入住珍珠含三餐)</h3>
							<p>￥<strong>299</strong>起</p>
						</li>
					</ul>
				</div>
				<!--右下主要内容区域-->
				<div class='meisongqu_right_center'>
					<!--标题区-->
					<ul class='meisongqu_right_one'>
						<li>热门游记</li>
						<li>热门游记</li>
						<li>
							<div class='meisongqu_last'>
								热门游记
							</div>
						</li>
					</ul>
					<!--游客日志 1-->
					<!-- <div class='meisongqu_right_two'>
						<div class='meisongqu_right_img'>
							<img src="img/right.jpeg" />
						</div>
						<div class='meisongqu_right_text'>
							<p>标题</p>
							<p>“这注定是平淡日子里，会闪光的一周！” 我在日记本过去一周总结栏里写下了这句话 合上本子，像是刚刚完成一件壮举，如释重负，酣然睡去 睡梦里，眼前突然闪现一道刺眼光线 我朝海的方向</p>
							<div class='meisongqu_right_bottom'>
								<pan class='margin'><i class='one'></i><a href='#'>美国</a></pan>
								<pan class='margin'><i class='two'></i><a href='#'>作者</a></pan>
								<pan class='margin'><i class='three'></i><a>查看</a></pan>
								<pan class='position'><a>赞</a><i class='four'></i></pan>
							</div>
						</div>
					</div> -->
					
					<!--翻页码-->
					<!-- <div class='overleaf'>
						<span>共250页/3000条</span>
						<span class='span'>1</span>
						<a href="#">2</a>
						<a href="#">3</a>
						<a href="#">4</a>
						<a href="#">5</a>
						<a href="#">6</a>
						<a href="#">7</a>
						<a href="#">下一页<i class='jiantou'></i></a>
					</div> -->
				</div>
			</div>
		</div>
		<div class="foot"></div>
		<script src="/js/jquery.js"></script>
		<script type="text/javascript" src="/js/index.js"></script>
		<script type="text/javascript">
			$('.head').load('http://localhost:8085/head');
			$('.foot').load('http://localhost:8085/foot');
			$('.search_a').click(function(e){
				e.preventDefault();
				var data = $('input')[0].value;
				window.location.href="http://localhost:8085/search?"+data
			})
			function makebox(res){
				var str ='';
				for (var i = 0;i<res.length;i++) {
					str += "<div class='meisongqu_right_two'><div class='meisongqu_right_img'>"
					str +=	"<img src="+res[i].imge+" /></div><div class='meisongqu_right_text'><p>标题</p>"
					str +="<p>"+res[i].userComment+"</p>"
					str +="<div class='meisongqu_right_bottom'><pan class='margin'><i class='one'></i><a href='#'>美国</a></pan>"
					str +="<pan class='margin'><i class='two'></i><a href='#'>"+res[i].userName+"</a></pan>"
					str +="<pan class='margin'><i class='three'></i><a>查看</a></pan>"
					str +="<pan class='position'><a>赞</a><i class='four'></i></pan></div></div></div>"
				}
				
				$('.meisongqu_right_center').append(str)
			}
			$.ajax({
				url: '/api/indexbox',
				type: 'post',
			}).then(function(res){
				console.log(res)
				makebox(res)
			})
			
		</script>
	</body>

</html>